// components/ListItem/index.tsx
import React from 'react'
import { View, Text } from '@tarojs/components'
import { Image } from '@nutui/nutui-react-taro'
import './index.scss'

interface ListItemProps {
  title: string
  value?: string
  showArrow?: boolean
  showBottomBorder?: boolean
  onClick?: () => void
  extra?: React.ReactNode
  icon?: any // 直接接收导入的图片资源
  iconSize?: number
}

const MyListItem: React.FC<ListItemProps> = (props) => {
  const {
    title,
    value,
    showArrow = false,
    showBottomBorder = true,
    onClick,
    icon,
    iconSize = 20
  } = props

  return (
    <View className={`list-item ${showBottomBorder ? 'with-border' : ''}`} onClick={onClick}>
      <View className="list-item-content">
        <View className="left-content">
          {icon && (
            <Image
              className="item-icon"
              src={icon} // 直接使用导入的图片
              width={iconSize}
              height={iconSize}
            />
          )}
          <Text className="title">{title}</Text>
        </View>
        <View className="right-content">
          {value && <Text className="value">{value}</Text>}
          {showArrow && (
            <Image
              className="arrow"
              src={require('@/assets/right_arrow.png')}
              width="12"
              height="12"
            />
          )}
        </View>
      </View>
    </View>
  )
}

export default MyListItem
